<template>
  <div>
    <el-button :type="flag ? 'primary' : 'default'" size="small" @click="changeHandle()" style="padding: 0.5em;">
      <i class="el-icon-setting" style="font-size: 1.4em;" />
    </el-button>
  </div>


</template>

<script>
  import { setDomainValue, getDomainValue } from './local-storage-util'
  export default {
    computed: {
    },
    data() {
      return {
        flag: false
      }
    },
    component: [
      setDomainValue,
      getDomainValue
    ],
    props: {
      /**
       * 存储在 local storage 里面的域
       */
      domain: String
    },
    methods: {
      changeHandle() {
        this.flag = !this.flag;
        let config = {'flag': this.flag}
        setDomainValue(this.domain, config)
        this.$emit('update:editFlag', this.flag)
      }
    },
    mounted() {
      if (this.domain == undefined) {
        alert("The domain parameter is not set")
        return
      }
      if (this.flag == undefined) {
        this.flag = false;
      }

      var rootNode = this.$store.getters['pageSettings'];
      let config = getDomainValue(rootNode, this.domain, {'flag': this.flag});
      this.$emit('update:editFlag', config.flag);
    }
  }
</script>

<style lang="scss" scoped>

</style>
